<template>
  <div class="main">
    <!-- 左侧信息面板 -->
    <div class="left-panel-list">
      <!-- 产品完成情况卡片 -->
      <Factory
        :navData="deviceList"
        :defaultActive="numID"
        containerHeight="80%"
        @item-click="handleItemClick"
      ></Factory>
    </div>

    <!-- 中间3D/设备区 -->
    <div class="center-area">
      <!-- <div class="device-container"></div> -->
    </div>
    <!-- 右侧能源卡片区 -->
    <div class="left-panel">
      <!-- 产品完成情况卡片 -->
      <div class="fac-first-card">
        <div slot="header" class="panel-title">
          <i class="fa fa-bar-chart"></i>
          <span class="panel-title-span">设备接入实况</span>
        </div>
        <div class="stats-card-fac">
          <div class="status-header">
            <h3>单管下料线</h3>
          </div>
          <div class="status-indicators">
            <div class="status-item">
              <el-radio-group v-model="resource">
                <el-radio label="1">加工中</el-radio>
                <el-radio label="2">空闲中</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>

      <!-- 合计卡片 -->
      <div class="source-messg">
        <div slot="header" class="panel-title">
          <i class="fa fa-calculator"></i>
          <span class="panel-title-span">近七日完成任务量</span>
        </div>
        <div style="padding: 2px; height: 18rem">
          <BarChart :chartData="chartData6" yAxisName="Nm³"></BarChart>
        </div>
      </div>

      <!-- 设备接入实况卡片 -->
      <div>
        <div slot="header" class="panel-title">
          <i class="fa fa-plug"></i>
          <span class="panel-title-span">设备任务情况</span>
        </div>
        <div class="tabContent">
          <!-- 显示 -->
          <div v-if="isshow">
            <div style="margin-bottom: 5px">
              <span class="tab-tit">库位数</span>
              <span
                style="color: #ff8500; margin-left: 11px; font-size: 14px"
                >{{ kuwei }}</span
              >
              <span class="tab-tit-sec">已入库</span>
              <span
                style="color: #2776db; margin-left: 11px; font-size: 14px"
                >{{ zhanyong }}</span
              >
            </div>
            <Table></Table>
          </div>
          <!-- 显示 -->
          <!-- 显示 -->
          <div v-else>
            <div>
              <TableY></TableY>
            </div>
          </div>
          <!-- 显示 -->
        </div>
      </div>
    </div>
  </div>
</template>
  <!-- 引入 Element UI JS -->
  <script>
// 初始化Vue实例
import LingChart from "@/components/LineChart/index.vue";
import BarChart from "@/components/barEchart/index.vue";
import RingChart from "@/components/Echart/index.vue";
import ContentReal from "@/views/home/components/Realstatus";
import Table from "@/views/ComprehensiveSituation/components/tabContent";
import TableY from "@/views/ComprehensiveSituation/components/tabContentY";
import Factory from "@/views/Factory/FactoryList";
// tabContentY
export default {
  components: {
    TableY,
    RingChart,
    ContentReal,
    Table,
    LingChart,
    BarChart,
    Factory,
  },
  data() {
    return {
      isshow: true,
      kuwei: "322",
      zhanyong: "222",
      numID: 0,
      resource: "1",
      opstion: {},
      chartData: [],
      chartData6: [
        { xAxis: "1月", seriesData: 100 },
        { xAxis: "2月", seriesData: 300 },
        { xAxis: "3月", seriesData: 500 },
        { xAxis: "4月", seriesData: 700 },
        { xAxis: "5月", seriesData: 800 },
        { xAxis: "6月", seriesData: 200 },
        { xAxis: "7月", seriesData: 250 },
        { xAxis: "8月", seriesData: 280 },
      ],
      deviceList: [
        { id: 1, mainText: "二跨", subText: "长管线联动" },
        { id: 2, mainText: "二跨", subText: "短管线联动" },
        { id: 3, mainText: "二跨", subText: "单线管" },
        { id: 4, mainText: "二跨", subText: "焊前库" },
        { id: 5, mainText: "二跨", subText: "一号焊机" },
        { id: 6, mainText: "二跨", subText: "二号焊机" },
        { id: 7, mainText: "二跨", subText: "三号焊机" },
        { id: 8, mainText: "二跨", subText: "工业电视" },
        { id: 9, mainText: "二跨", subText: "中间库(长直管库)" },
        // 数据
        { id: 10, mainText: "二跨", subText: "系统弯" },
        { id: 11, mainText: "三跨", subText: "四号电机" },
        { id: 12, mainText: "三跨", subText: "五号电机" },
        { id: 13, mainText: "三跨", subText: "工业电视" },
        { id: 14, mainText: "三跨", subText: "⼿氩" },
        { id: 15, mainText: "四跨", subText: "装配区域" },
        { id: 16, mainText: "四跨", subText: "热处理" },
        { id: 17, mainText: "四跨", subText: "四跨⽔压" },
        { id: 18, mainText: "四跨", subText: "缝隙炉" },
      ],
    };
  },
  mounted() {
    // var myChart3 = echarts.init(document.getElementById("stats-item"));
  },
  methods: {
    handleItemClick(item) {
      if (item.id === 18 || item.id === 4 || item.id === 9 || item.id === 13) {
        this.isshow = true;
      } else {
        this.isshow = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
// @import "./css/home.css";
.chart-container {
  // background: red;
  // display: flex;
  // width: 7rem;
  // height: 7rem;
  // margin-bottom: 1rem;
  // border: 1px solid #ebeef5;
  // border-radius: 8px;
  // padding: 20px;
  box-sizing: border-box;
}
.left-panel .el-card {
  // background: red;
  height: 33%;
}
.left-panel .el-card:last-child {
  // background: red;
  height: 45%;
}
.tabContent {
  .tab-tit {
    font-size: 16px;
    color: #fff;
    margin: 5px 2px;
  }
  .tab-tit-sec {
    // margin-top: 5px;
    // margin-left: 5%;
    margin: 5px 2px 5px 5%;
    font-size: 16px;
    color: #fff;
  }
}
.source-messg {
  margin: 20px 0;
}
// .stats-item {
// }
// .left-panel .el-card:first-child {
//   // height: 10%;
// }
.left-panel {
  width: 434px;
  height: 997px;
}
.left-panel-list {
  margin-top: 100px;
  margin-left: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 841px;
  opacity: 0.8;
}
.status-header {
  margin-top: 1rem;
  margin-left: 1rem;
}

.status-header h3 {
  font-size: 18px;
  margin: 0;
  color: #fff;
}

.status-indicators {
  display: flex;
  // gap: 20px;
}

.status-item {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin: 1rem;
  // gap: 1rem;
}

.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.processing {
  background-color: #2ecc71;
}

.idle {
  background-color: #95a5a6;
}
::v-deep .el-radio {
  /* 覆盖选中时文字的高亮颜色 */
  &.is-checked .el-radio__label {
    color: #fff !important; /* 保持文字颜色不变 */
  }
  .el-radio__label {
    color: #fff;
  }
  /* 自定义选中状态下的单选框样式 */
  &.is-checked .el-radio__inner {
    border-color: rgb(17 223 63);
    background: rgb(17 223 63);
  }

  /* 移除选中时的文字加粗效果 */
  .el-radio__label {
    font-weight: normal !important;
  }
}
</style>
